<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="(item, index) in 10">
                {{ item }} -- 下标: {{ index }}
            </li> -->
            <!-- 字符串 -->
            <!-- <li v-for="(item, index) in 'abcdefg'">
                {{ item }} -- 下标: {{ index }}
            </li> -->
            <!-- 数组 -->
            <!-- <li v-for="(item, index) in arr">
                {{ item }} -- 下标: {{ index }}
            </li> -->
            <!-- 对象 -->
            <!-- <li v-for="(value, key, index) in info">
                value:{{ value }} -- key: {{ key, index }} --下标: {{ index }}
            </li> -->
            <!-- 嵌套循环 -->
            <!-- <ul>
                <li v-for="(item, index) in arr2">
                    <h3>
                        {{ item.title }}
                    </h3>
                    <div>
                        <p v-for="(items, index) in item.arr">
                            {{ items }}
                        </p>
                    </div>
                </li>
            </ul> -->
        </ul>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        // 1. 实例化 new Vue
        const app = new Vue({
            // 挂载点
            el: "#app",
            // 存放数据
            data: {
              count: 100,
              arr: [1111, 2222, 3333],
              info: {
                  name: "张三",
                  age: 29,
                  sex: "男"
              },
              arr2: [
                  {
                      title: "标题一",
                      arr: ['我是标题一的内容1', '我是标题一的内容2', '我是标题一的内容3']
                  },
                  {
                      title: "标题二",
                      arr: ['我是标题的二内容1', '我是标题的二内容2', '我是标题的二内容3']
                  },
                  {
                      title: "标题三",
                      arr: ['我是标题的三内容1', '我是标题的三内容2', '我是标题的三内容3']
                  },
              ]
            }
        })
        // 2. 内置指令(方便操作dom结构) ==> 本质(自定义属性)
        // 2.1 v-for(循环生成dom结构)  循环数字  v-for="(每一项, 下标) in 循环结束条件"
        // 2.2 循环字符串
        // 2.3 循环数组
        // 2.4 循环对象
    </script>
</body>
</html>